<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情 - 超市系统</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/product.css">
    <script src="/js/jquery-1.12.4.min.js"></script>

</head>

<body>
    <main class="product-container" id="app">
        <div class="product-content">
            <!-- 左侧商品图片和评论 -->
            <div class="product-left">
                <div class="product-image">
                    <img :src="product.image" :alt="product.name">
                </div>
                <div class="product-comments">
                    <h3>商品评价</h3>
                    <div class="comments-list">
                        <div class="comment-item" v-for="comment in comments" :key="comment.id">
                            <div class="comment-header">
                                <span class="comment-user">{{ comment }}</span>
                                <span class="comment-date">{{ comment.date }}</span>
                            </div>
                            <div class="comment-content">{{ comment.content }}</div>
                        </div>
                        <div v-if="comments.length === 0" style="color: #888;">暂无评论</div>
                    </div>
                </div>
            </div>

            <!-- 右侧商品信息 -->
            <div class="product-right">
                <div class="product-info">
                    <h1>{{ product.commodityName }}</h1>
                    <div class="product-price">
                        <span class="price-label">价格：</span>
                        <span class="price-value">¥{{ product.commoditySalePrice }}</span>
                    </div>
                    <div class="product-description">
                        <h3>商品描述:</h3>
                        <p style="font-weight: bolder; font-size: large;">{{ product.commodityDescription }}</p>
                    </div>
                    <div class="product-specs">
                        <h3>商品规格</h3>
                        <div class="specs-options">
                            <div class="spec-option" v-for="spec in product.specs" :key="spec">{{ spec }}</div>
                        </div>
                    </div>
                    <div class="product-quantity">
                        <h3>购买数量</h3>
                        <div class="quantity-control">
                            <button @click="decreaseQuantity">-</button>
                            <input type="number" v-model.number="quantity" min="1">
                            <button @click="increaseQuantity">+</button>
                        </div>
                    </div>
                    <div class="product-actions">
                        <button class="buy-now-btn" @click="buyNow">直接购买</button>
                        <button class="add-to-cart-btn" @click="addToCart">加入购物车</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 购物车成功提示弹窗 -->
        <div class="modal" v-if="showSuccessModal">
            <div class="modal-content success-modal-content">
                <div class="modal-body">
                    <div class="success-icon">✅</div>
                    <div class="success-message">成功加入购物车</div>
                    <button class="go-to-cart-btn" @click="goToCart">去购物车</button>
                </div>
            </div>
        </div>
    </main>



    <script src="/js/vue.js"></script>
    <script src="/js/product.js"></script>
</body>

</html>